<!--
 @description 关联方案
 @fileName Programme.vue
 @author zengqiongying
 @created 2024/08/19 16:00:53
-->
<template>
  <div>
    <div class="table-title">关联方案：</div>
    <div class="table-list-box">
      <el-table
        style="width: 100%"
        :data="dataList"
        header-row-class-name="table-list-header"
        highlight-current-row
      >
        <!-- <el-table-column type="index" width="50" /> -->
        <el-table-column prop="schemeName" label="方案名称" />
        <el-table-column prop="schemeCreateBy" width="150" label="上传用户" />
        <el-table-column prop="schemeCreateTime" width="150" label="上传时间" />
        <el-table-column prop="createBy" width="150" label="创建人" />
        <el-table-column prop="createTime" width="150" label="创建时间" />
        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template v-slot="{row}">
            <el-button v-if="row.id" class="my-button-txt" type="text" size="mini" @click="handleDelete">删除</el-button>
            <el-button class="my-button-txt" type="text" size="mini" @click="handleOpenDlg">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <add-programme :visible.sync="showAdd" @change="handleAddChange" />
  </div>
</template>

<script>
import AddProgramme from './AddProgramme'
import { saveScheme, deleteScheme } from '@/api/productCombine/scheme'
export default {
  name: 'Programme',
  components: { AddProgramme },
  props: {
    combineId: {
      type: String,
      default: ''
    },
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dataList: [
        {
          id: '',
          schemeId: '',
          schemeName: '',
          schemeCreateBy: '',
          schemeCreateTime: '',
          createBy: '',
          createTime: ''
        }
      ],
      showAdd: false
    }
  },

  computed: {},
  watch: {
    detail: {
      handler(d, oldVal) {
        for (const k in this.dataList[0]) {
          this.$set(this.dataList[0], k, (d && d[k]) || '')
        }
      },
      immediate: true,
      deep: true
    }
  },

  created() {},

  methods: {
    handleOpenDlg() {
      this.showAdd = true
    },
    handleDelete() {
      const id = this.detail.id || ''
      if (!id) return
      this.$confirm('确定要删除当前所关联的方案吗？一旦删除，将无法恢复。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteScheme(id).then(res => {
          if (res.success === 1) {
            this.$message.success('操作成功')
            this.refreshTable()
          }
        })
      })
    },
    handleAddChange(d) {
      const { id, programmeName, createBy, createTime } = d
      const data = {
        productCombinationId: this.combineId,
        schemeId: id,
        schemeName: programmeName,
        schemeCreateBy: createBy,
        schemeCreateTime: createTime
      }
      if (this.detail && this.detail.id) {
        data.id = this.detail.id
      }
      saveScheme(data).then(res => {
        if (res.success === 1) {
          this.refreshTable()
        }
      })
    },
    refreshTable() {
      this.$emit('refresh')
    }
  }
}

</script>
<style lang='scss' scoped>
.my-button-txt{
  padding: 0;
  color:$--color-primary;
}
.table-title{
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.5;
  .c-red{
    color: #f00;
  }
}
</style>
